<template>
  <div class="creative-item">
    <el-image :src="creativeData.type === 0?creativeData.creativeUrl:creativeData.thumbnailUrl" @click="$emit('click', creativeData)" style="width: 100%;height: 500px" fit="contain"></el-image>
    <div class="creative-item-desc">
      <el-row>
        <el-col :span="24"><span><strong>短id：</strong>{{ creativeData.shortId }}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="24"><span><strong>素材名：</strong>{{ creativeData.name }}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><span :style="keywords==='spend'?{color: '#FF3A30'}: null" style="display: inline-block"><strong>花费：</strong>{{ creativeData.spend }}</span></el-col>
        <el-col :span="12"><span :style="keywords==='impressions'?{color: '#FF3A30'}: null" style="display: inline-block"><strong>曝光：</strong>{{ thousandSeparator(creativeData.impressions) }}</span></el-col>
      </el-row>
      <el-row>
        <el-col :span="12"><span :style="keywords==='clicks'?{color: '#FF3A30'}: null" style="display: inline-block"><strong>点击：</strong>{{ thousandSeparator(creativeData.clicks) }}</span></el-col>
        <el-col :span="12"><span :style="keywords==='install'?{color: '#FF3A30'}: null" style="display: inline-block"><strong>安装：</strong>{{ thousandSeparator(creativeData.install) }}</span></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {thousandSeparator} from "@/util/util";

export default {
  name: "CreativeItem",
  props: {
    creativeData: {
      type: Object,
      required: true
    },
    keywords: {
      type: String,
      required: true
    }
  },
  methods:{
    thousandSeparator(num){
      return thousandSeparator(num)
    }
  }
}
</script>

<style lang="scss" scoped>
.creative-item {
  width: 100%;
  .creative-item-desc {
    font-size: 14px;
    color: #333333;
  }
}
</style>
